<template>
  <div class="margin-top">
    <!-- 预约信息表格 -->
    <el-table :data="reservations" style="width: 100%">
      <el-table-column prop="id" label="预约编号"></el-table-column>
      <el-table-column prop="roomName" label="自习室名称"></el-table-column>
      <el-table-column prop="uname" label="预约的用户名"></el-table-column>
      <el-table-column prop="startTime" label="开始时间"></el-table-column>
      <el-table-column prop="endTime" label="结束时间"></el-table-column>
      <el-table-column prop="reserveStatus" label="预约状态"></el-table-column>
      <el-table-column label="操作">
        <!-- 操作按钮 -->
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="handleReview(scope.row)">审核预约</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 审核对话框 -->
    <el-dialog :visible.sync="dialogVisible" title="审核预约">
      <p>确认审核通过该预约吗？</p>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmReview">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  data () {
    return {
      reservations: [], // 预约列表
      dialogVisible: false, // 控制对话框显示
      currentReservation: null // 当前选中的预约
    }
  },
  async mounted () {
    // 组件挂载时获取预约信息
    await this.fetchReservations()
  },
  methods: {
    // 获取预约信息
    async fetchReservations () {
      try {
        const adminName = localStorage.getItem('rname')
        if (adminName) {
          const response = await axios.get(`/api/studyroomadmin/getReservationByAdmin?adminName=${adminName}`)
          this.reservations = response.data
        }
      } catch (error) {
        console.error('获取预约信息失败:', error)
        this.$message.error('获取预约信息失败')
      }
    },
    // 处理审核操作
    handleReview (reservation) {
      this.currentReservation = reservation
      this.dialogVisible = true
    },
    // 确认审核
    async confirmReview () {
      try {
        await axios.put(`/api/studyroomadmin/handlereservation/${this.currentReservation.id}`)
        this.dialogVisible = false
        this.currentReservation.reserveStatus = '审核通过'
        this.$message.success('审核成功')
      } catch (error) {
        console.error('审核失败:', error)
        this.$message.error('审核失败')
      }
    }
  }
}
</script>

<style scoped>
.margin-top {
  margin-top: 1px;
}
</style>
